<template>
	<view class="my-banlance">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">申请提现</block>
		</cu-custom>
		<view class="top-header bg-gradual-orange shadow shadow-lg">
			<view class="able-num">
				<view class="banlance-num">{{money}}</view>
				<view class="banlance-tips">当前可提现余额</view>
				<!-- <view class="go-withdrawal">
					<view  @tap="toList()">提现明细</view>
				</view> -->
			</view>
		</view>

		<view class="getAction">
			<view class="action-item action-name">
				<view class="action-title">核对申请信息</view>
				<view class="action-title" style="color:red;font-weight: 600;">
					温馨提醒：一定要填写详细的银行卡支行提现才会成功，因为公司对公账号转出需要详细支行信息。
				</view>
			</view>
			<view class="action-item cu-form-group">
				<label for="types" class="item-title">提现方式</label>
				银行卡
				<!-- <input id="types" v-model='form.types'  class="" disabled/> -->
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">开户行</label>
				<input id="money" v-model="form.bank_name" class="text-red" type="text" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">开户地址</label>
				<input id="money" v-model="form.bank_address" class="text-red" type="text" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">银行卡号</label>
				<input id="money" v-model="form.bank_card" class="text-red" type="text" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">姓名</label>
				<input id="money" v-model="form.bank_contact" class="text-red" type="text" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">身份证号码</label>
				<input id="money" v-model="form.identityNo" class="text-red" type="text" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">电话</label>
				<input id="money" v-model="form.mobile" class="text-red" type="number" />
			</view>
			<view class="action-item cu-form-group">
				<label for="money" class="item-title">金额</label>
				<input id="money" v-model="form.applyMoney" class="text-red" type="number" />
			</view>
			<view class="submit-btn action-item flex flex-direction">
				<button class="cu-btn bg-red lg" @tap="subApply">提交申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import banlance from '@/api/banlance';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				form: {
					applyMoney: 0.00,
					bank_name: '',
					bank_card: '',
					bank_address: '',
					types: 'bank',
					mobile: '',
					bank_contact: '',
					identityNo:''
				},

				canUse: 0.00,
				canNotUse: 0.00,
				applyList: [],
				money: 0,
			}
		},
		onShow() {
			this.getRecord();
		},
		onLoad() {},
		computed: {
			canMoney() {
				if (this.canUse > 0) {
					return this.canUse.toFixed(2);
				} else {
					return '0.00';
				}
			},
			watchMoney() {
				if (this.money >= this.form.applyMoney) {
					return 0;
				} else {
					return 1;
				}
			},
			...mapState(['userInfo', 'hasLogin']),

		},
		methods: {
			toList() {
				uni.navigateTo({
					url: '/pages/my/balance/list'
				})
			},
			async getRecord() {
				banlance.getRecord().then(res => {
					if (res.code == 1) {
						this.applyList = res.data.list;
						this.money = res.data.money
						for (let i = 0; i < this.applyList.length; i++) {
							if (this.applyList[i].status == 1) {
								this.canNotUse += parseInt(this.applyList[i].money);
							}
						}
						this.canUse = this.userInfo.money - this.canNotUse;

						if (res.data.log) {
							this.form = res.data.log
						}

						console.log(this.canNotUse);
					} else {
						console.log(res);
					}
				});

			},
			async subApply() {
				console.log(this.form)
				// alert(this.form.applyMoney)
				if (this.form.applyMoney < 10) {
					this.showModels('提现金额不得低于10元');
					return false;
				}

				if (this.form.applyMoney % 10 !== 0) {
					this.showModels('提现金额必须是 10 的整数倍');
					return false;
				}

				this.form.types = 'bank';

				let res = await banlance.apply({
					'money': this.form.applyMoney,
					'uid': this.userInfo.id,
					'type': 'bank',
					...this.form
				})
				this.showModels(res.msg);
				if (res.code == 1) {
					this.showModels(res.msg);
					this.canUse = this.canUse - this.applyMoney;
					this.applyMoney = 0.00;
				}
			},
			showModels(message) {
				uni.showModal({
					title: '提示',
					content: message,
					showCancel: false,
					success: function(res) {}
				});
			}
		}
	}
</script>

<style lang="less">
	
	.go-withdrawal {
		display:flex;
		justify-content: center;
		margin:10px;
	
		view {
			border: 1rpx solid #ffffff;
			padding: 5rpx 10rpx;
			height: 50rpx;
			line-height: 40rpx;
			margin-top: 15rpx;
			border-radius: 10rpx;
			width:100px;
		}
	}
	
	.my-banlance {
		.top-header {
			height: 200rpx;
			text-align: center;
		}

		.able-num {
			padding-top: 10rpx;

			.banlance-num {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 50rpx;
				font-weight: 550;
			}

			.banlance-tips {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 25rpx;
			}
		}

		.getAction {
			margin-top: 10rpx;

			.action-item {
				margin: 0 30rpx;
			}

			.submit-btn {
				margin-top: 30rpx;
			}
		}

		.action-name {
			height: 180rpx;
			line-height: 50rpx;
			background-color: #fff;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #ccc;
			color: #666;
		}

		.item-title {
			margin-right: 20rpx;
		}
	}
</style>